<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-07-09 15:53:08
 * @LastEditTime: 2022-08-22 00:31:28
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 标准表单渲染 - 组件
 * @FilePath: \vue3-element-plus-web\src\components\StandardForm\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="standardForm-container">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="formData"
      :size="selfOptions.size"
      :label-width="selfOptions.labelWidth"
    >
      <!-- 遍历字段配置列表 -->
      <template v-for="(item, index) in column" :key="index">
        <!-- 判断 formShow 不为 false 方进行显示 -->
        <template v-if="item.formShow !== false">
          <el-form-item
            :label="`${item.label}：`"
            :prop="item.prop"
          >
            <!-- 多行文本框 -->
            <template v-if="item.formType === 'textarea'">
              <el-input
                type="textarea"
                v-model="formData[item.prop]"
                :placeholder="`请输入${item.label}`"
              >
              </el-input>
            </template>

            <!-- select -->
            <template v-else-if="item.formType === 'select'">
              <el-select
                v-model="formData[item.prop]"
                :placeholder="`请输入${item.label}`"
              >
                <el-option
                  v-for="item in item.dictData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>

            <!-- radio -->
            <template v-else-if="item.formType === 'radio'">
              <el-radio-group v-model="formData[item.prop]">
                <el-radio
                  v-for="item in item.dictData"
                  :key="item.value"
                  :label="item.value">
                  {{item.label}}
                </el-radio>
              </el-radio-group>
            </template>

            <!-- checkbox -->
            <template v-else-if="item.formType === 'checkbox'">
              <el-checkbox-group v-model="formData[item.prop]">
                <el-checkbox
                  v-for="item in item.dictData"
                  :key="item.value"
                  :label="item.value">
                  {{item.label}}
                </el-checkbox>
              </el-checkbox-group>
            </template>

            <!-- 单行文本框 -->
            <template v-else>
              <el-input
                v-model="formData[item.prop]"
                :placeholder="typeof item.formPlaceholder === 'undefined' ? `请输入${item.label}` : item.formPlaceholder"
              >
              </el-input>
            </template>
          </el-form-item>
        </template>
      </template>

    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

// 组件默认属性值
const DEFAULT_OPTIONS = {
  // 用于控制该表单内组件的尺寸 ：	'large' | 'default' | 'small'
  size: 'default',
  // 标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto。	string | number
  labelWidth: 110,
  // 字段配置
  column: [
    {
      formShow: false, // 在表单组件内是否显示
      formType: 'text', // 在表单内字段展现形式： text 、 textarea 、 number 、 select 、 cascader 、 selectMultiple 、 checkbox 、 radio 、 date 、 daterange 、 datetime 、 datetimerange 等
      formPlaceholder: '' // 输入框占位文本	string
    }
  ]
}

export default {
  name: 'StandardForm',
  computed: {
    ...mapGetters([
    ])
  },
  components: {
  },
  props: {
    // 组件配置项
    options: {
      type: Object,
      default: () => {
        return DEFAULT_OPTIONS
      }
    }
  },
  data() {
    return {
      // 字段配置
      column: [],
      // 当前组件配置信息 ， 由父组件传过来
      selfOptions: {},
      // 表单数据集
      formData: {
      },
      // 表单校验规则
      rules: {
        // name: [
        //   { required: true, message: '请输入用户名', trigger: 'change' },
        //   { max: 50, message: '用户名最大长度50位', trigger: 'change' }
        // ]
      }
    }
  },
  watch: {
  },
  created() {
    // 将调用参数与默认参数合并
    this.selfOptions = Object.assign({}, DEFAULT_OPTIONS, this.options)
    console.log(`🚀 ~ file: index.vue ~ line 99 ~ created ~ this.selfOptions`, this.selfOptions)

    // 字段配置
    this.column = this.selfOptions.column
    console.log(`🚀 ~ file: index.vue ~ line 103 ~ created ~ this.column`, this.column)
  },
  activated() {
  },
  deactivated() {
  },
  methods: {
    // 重置表单
    resetChangeForm() {
    },
    // 提交表单
    submitForm() {
      return this.$refs['dataForm'].validate()
    },
    // 获取表单数据
    getFormData() {
      return this.formData
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.standardForm-container{
}
</style>
